import useGlobalAPI from '@/hooks/useGlobalAPI'
import { FormInstance } from 'ant-design-vue'
import './login.less'
import useLoading from '@/hooks/loading'
import { iconUrl } from '@/libs/baseUrl'
export default defineComponent({
  name: 'login',
  setup() {
    let { router, store } = useGlobalAPI()

    const { loading, startLoading, closeLoading } = useLoading()

    let formRef = ref<FormInstance>()

    let state = reactive({
      platFormUserName: '',
      platFormUserPass: ''
    })

    /**提交表单且数据验证成功后回调事件 */
    const handle_form_finish = () => {
      startLoading()
      let loginData = toRefs(state)
      store
        .dispatch('login/LOGIN', {
          platFormUserName: loginData.platFormUserName.value,
          platFormUserPass: loginData.platFormUserPass.value
        })
        .then(res => {
          closeLoading()

          router.push('/CBC')
        })
        .catch(err => {
          closeLoading()
        })
    }
    /** 提交表单且数据验证失败后回调事件 */
    const handle_form_finish_failed = () => {
      console.log('handle_form_finish_failed', state)
      returnEmit()
    }
    // 清空表单 关闭外层弹框
    const returnEmit = () => {
      formRef.value?.resetFields()
    }
    return () => (
      <div class='login container relative'>
        <div class=' h-full absolute top-0 left-0 shadow-mim  p-4'>
          <div class='h-full'>
            <div class='h-full rounded overflow-hidden'></div>
          </div>
        </div>
        <div class='w-2/3 h-full p-4 float-right'>
          <div class='h-full bg-opacity-80 bg-white rounded shadow-lg flex justify-center items-center'>
            <div class='w-1/3'>
              <div class='login-title mb-8 flex flex-col justify-between items-start'>
                <div class='mb-8 flex justify-center items-center'>
                  <img src={iconUrl('LOGO')} class='w-36 h-36'></img>
                  <p class='text-4xl font-bold ml-4'>
                    <span class='text-primary'>恒蓝云</span>后台管理登录
                  </p>
                </div>
                <div class='title text-2xl font-bold'></div>
              </div>
              <div class='login-content mb-10'>
                <a-form
                  v-model={[formRef, 'ref']}
                  name='login'
                  model={state}
                  onFinish={handle_form_finish}
                  onFinishFailed={handle_form_finish_failed}
                >
                  <a-form-item name='userName'>
                    <a-input
                      v-model={[state.platFormUserName, 'value']}
                      class='rounded pl-2'
                      placeholder='账号'
                    >
                      {{
                        prefix: () => <i class='iconfont icon-touxiang text-info'></i>
                      }}
                    </a-input>
                  </a-form-item>
                  <a-form-item name='dictDesc'>
                    <a-input
                      v-model={[state.platFormUserPass, 'value']}
                      class='rounded pl-2'
                      placeholder='密码'
                      type='password'
                    >
                      {{
                        prefix: () => <i class='iconfont icon-xiugaimima text-info'></i>
                      }}
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-button
                      loading={loading.value}
                      type='primary'
                      class='w-full  rounded'
                      html-type='submit'
                    >
                      登录
                    </a-button>
                  </a-form-item>
                </a-form>
              </div>

              <div class='login-others'>
                <div class='border-t border-default border-dashed relative'>
                  <span class='py-2 px-4 rounded absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white'>
                    其他登录方式
                  </span>
                </div>
                <div class='mt-4 flex justify-center items-center'>
                  <i class='iconfont icon-weixin text-4xl text-success cursor-pointer'></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
})
